<template>
  <!--发票管理-->
  <div class="invoice-list">
    <div class="btns" style="background:#fff;position:relative;">
      <div style="padding:1em 0;margin:0em 0em 0em 1em;">
        <el-select v-model="searchForm.projectId" @change="proSelectChange" placeholder="选择项目" filterable clearable>
          <el-option v-for="item in options.projects" :keys="item.id" :label="item.projectName" :value="item.id" />
        </el-select>
        <el-select v-model="searchForm.contractId" placeholder="选择合同" filterable clearable>
          <el-option v-for="item in options.contracts" :keys="item.id" :label="item.contractNo" :value="item.id"/>
        </el-select>
        <el-date-picker
          style="margin-left: 8px"
          v-model="searchForm.time"
          unlink-panels
          value-format="timestamp"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button @click="toSearch" type="primary" icon="el-icon-search" size="small" style="margin: 4px 0 0 6px" >查询</el-button>
      </div>
    </div>
    <!--发票信息显示表单-->
    <a-card title="采购合同发票明细" :bordered="false">
      <div>
        <el-button @click="showAddDialog" icon="el-icon-plus" type="success" size="small" :disabled="searchForm.contractId?false:true" >新增</el-button>
      </div>
      <a-table
        :data-source="invoiceItems"
        size="small"
        :rowKey="record => record.id"
        :loading="invoiceItemsLoading"
        :scroll="invoiceItems.length > 0 ?{ x: 600}:{}"
        style="margin-top: 1em"
      >
        <a-table-column :width="60" align="center" key="no" title="发票编号" data-index="no" />
        <a-table-column :width="60" align="center" key="operator" title="上传人" data-index="operator" />
        <a-table-column :width="60" align="center" key="image" data-index="image"  title="发票凭证" >
          <template slot-scope="text, record, index">
          <el-image lazy fit="contain" style="height: 40px; width:auto" :src="text" :preview-src-list="[text]">
            <div slot="placeholder" class="image-slot">
              <i class="el-icon-loading"></i>加载中
            </div>
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
        </a-table-column>
        <a-table-column :width="60" align="center" key="time" title="发票上传时间" data-index="time" >
          <template slot-scope="text, record">
            {{dateTimeFormat(text)}}
          </template>
        </a-table-column>
        <a-table-column  align="center" :width="140" key="action" title="操作">
          <template slot-scope="text, record, index">
            <el-button @click.native.stop="openEditDialog(record)" icon="el-icon-edit" type="success" size="mini" style="padding: 7px 10px;">修改</el-button>
            <el-button @click.native.stop="deleteInvoiceInfo(record, index)" icon="el-icon-delete" type="danger" size="mini" style="padding: 7px 10px;">删除</el-button>
          </template>
        </a-table-column>
      </a-table>
    </a-card>


    <!--修改发票信息模态框-->
    <el-dialog v-el-drag-dialog title="修改信息" :visible.sync="editInvoiceInfoDialog.visible" width="30%">
      <el-form ref="editInvoiceInfoDialogForm" :model="editInvoiceInfoDialog.form" status-icon>
        <el-form-item label="发票编号" label-width="80px" size="small" prop="no">
          <a-input  v-model="editInvoiceInfoDialog.form.no" :precision="2" :step="1" ></a-input>
        </el-form-item>
        <el-form-item label="上传人" label-width="80px" size="small" prop="operator">
          <el-input v-model="editInvoiceInfoDialog.form.operator" :precision="2" :step="1"/>
        </el-form-item>
        <el-form-item label="发票凭证" label-width="80px" size="small" prop="image">
          <el-image :src="editInvoiceInfoDialog.form.image"></el-image>
          <common-upload
            :url="fileUploadUrl"
            v-model="fileList"
            :is-dragger="false"
            :multiple="false"
            :maxNum="1"
          />
        </el-form-item>
        <el-form-item label="上传时间" label-width="80px" size="small" prop="time">
          <el-date-picker v-model="editInvoiceInfoDialog.form.time"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="editInvoiceInfoDialog.visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="editInvoiceInfo">确 定</el-button>
      </div>
    </el-dialog>

    <!--发票信息登记模态框-->
    <el-dialog v-el-drag-dialog title="发票信息登记" :visible.sync="addInvoiceDialog.visible" width="400px">
      <el-form ref="addInvoiceDialogForm" :model="addInvoiceDialog.form" status-icon>
        <el-form-item label="发票编号" label-width="80px" size="small" prop="no">
          <a-input v-model="addInvoiceDialog.form.no" :precision="2" :step="1" ></a-input>
        </el-form-item>
        <el-form-item label="上传人" label-width="80px"  size="small" prop="operator">
          <a-input v-model="addInvoiceDialog.form.operator" :precision="2" :step="1" ></a-input>
        </el-form-item>
        <el-form-item label="发票凭证" label-width="80px" size="small" prop="image">
          <el-image :src="addInvoiceDialog.form.image"></el-image>
          <common-upload
            :url="fileUploadUrl"
            v-model="fileList"
            :is-dragger="false"
            :multiple="false"
            :maxNum="1"
          />
<!--          <a-input v-model="addInvoiceDialog.form.image" :precision="2" :step="1" ></a-input>-->
        </el-form-item>
        <el-form-item label="上传时间" label-width="80px" size="small" prop="time">
          <el-date-picker
            v-model="addInvoiceDialog.form.time"
            value-format="timestamp"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="addInvoiceDialog.visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="addInvoiceInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import "@/styles/auto-style.css"
  import { getAction, postActionByJson, postActionByQueryString } from "@/api/manage"
  import { dateTimeFormat } from "@/utils/format"
  import { beforeUpload, uploadStatusChange } from '@/utils/upload'
  import elDragDialog from "@/directive/el-drag-dialog"
  import CommonUpload from "@/components/Upload/CommonUpload"

  export default {
    directives: { elDragDialog },
    components: {
      CommonUpload
    },
    watch: {
      activeKey(key) {
        console.log(key);
      },
    },
    created() {
      this.loadPurchaseProjects()
      this.loadContracts()
    },
    mounted() {
      var that = this;
      // <!--把window.onresize事件挂在到mounted函数上-->
      window.onresize = () => {
        return (() => {
          that.windowHeight = document.documentElement.clientHeight  - 130; // 高
        })()
      };
    },
    data() {
      const fileUploadUrl = process.env.VUE_APP_BASE_API + 'file/uploadCache'

      return {
        fileList: [],
        url: {
          addInvoiceInfo: '/invoice/addInvoiceInfo',
          findInvoice: '/invoice/findInvoice',
          editInvoiceInfo: '/invoice/editInvoiceInfo',
          deleteInvoiceInfo: '/invoice/deleteInvoiceInfo',
          findAllLike: '/purchase/project/findAllLike',
          findByProjectId: '/purchase/contract/findByProjectId'
        },
        options: {
          projects: [],
          contracts: [],
        },
        activeKey: ['1'],
        header: "n",
        fileNum: 1,
        fileList: [],
        fileUploadUrl,
        ImgShowDialog: {
          visible: false
        },
        editInvoiceInfoDialog: {
          form: {},
          visible: false
        },
        addInvoiceDialog: {
          form: {},
          visible: false
        },
        showInvoiceDialog: {
          visible: false
        },
        invoiceItemsLoading: false,
        invoiceItems: [],
        imgItems: [],
        imgItemsLoading: false,
        contractAttribute: {contractName:''}, // 合同订单信息
        purchaseProjects: [], // 采购项目
        searchForm: {}, // 搜索form数据源
        windowHeight: document.documentElement.clientHeight - 130, // 页面高度
        margin: 0, // left-sider 移动距离
      }
    },
    methods: {
      addInvoiceInfo(){
        this.$refs.addInvoiceDialogForm.validate((valid)=>{
          if (valid){
            if(this.fileList&&this.fileList.length>0){
              const fileList1 = this.fileList.map(item => {
                return { id: item.id, name: item.name, url: item.url, type: 0, operator: item.response.operator }
              })
              this.addInvoiceDialog.form.files = fileList1
            }
            this.addInvoiceDialog.form.contractId = this.searchForm.contractId
            postActionByJson(this.url.addInvoiceInfo,this.addInvoiceDialog.form)
            .then(resp =>{
              this.$message.success(resp.message)
            }).catch(()=>{
              this.$message.error('提交失败')
            }).finally(()=>{
              this.addInvoiceDialog.form = {}
              this.addInvoiceDialog.visible = false
              this.fileList = []
              this.toSearch()
            })
          }
        })
      },
      editInvoiceInfo(){
        this.$refs.editInvoiceInfoDialogForm.validate((valid)=>{
          if (valid){
            if(this.fileList&&this.fileList.length>0){
              const fileList1 = this.fileList.map(item => {
                return { id: item.id, name: item.name, url: item.url, type: 0, operator: item.response.operator }
              })
              this.editInvoiceInfoDialog.form.files = fileList1
            }
            this.addInvoiceDialog.form.contractId = this.searchForm.contractId
            postActionByJson(this.url.editInvoiceInfo,this.editInvoiceInfoDialog.form)
            .then(resp =>{
              this.$message.success(resp.message)
            }).catch(()=>{
              this.$message.error('修改失败')
            }).finally(()=>{
              this.editInvoiceInfoDialog.visible = false
              this.editInvoiceInfoDialog.form = {}
              this.fileList = []
              this.toSearch()
            })
          }
        })
      },
      openEditDialog(record){
        let form = this.invoiceItems.filter(item=>item.id==record.id)[0]||{}
        this.editInvoiceInfoDialog.form = Object.assign({}, form)
        this.editInvoiceInfoDialog.visible = true
      },
      deleteInvoiceInfo(recode){
        getAction(this.url.deleteInvoiceInfo,{id: recode.id})
        // postActionByJson('/stock/invoice/deleteInvoiceInfo',{id: recode.id})
          .then(resp =>{
            this.$message.success(resp.message)
            this.toSearch()
          })
      },
      showAddDialog() {
        this.addInvoiceDialog.visible = true
      },
      /**
       * 点击查询事件
       */
      toSearch() {
        let form = Object.assign({}, this.searchForm)
        if (form.time&&form.time.length>0) {
          form.startTime = form.time[0]
          form.endTime = form.time[1]
        }
        this.$delete(form,'time')
        getAction(this.url.findInvoice,form)
        .then(resp =>{
          if (resp.data){
            this.invoiceItems = resp.data
          }
        })
      },
      /**
       * left-sider 收缩事件
       */
      changeMargin(){
        this.margin = this.margin == 0?-460-14:0
      },
      /**
       * 加载下拉框所有采购项目
       */
      loadPurchaseProjects() {
        getAction(this.url.findAllLike)
          .then((resp) => {
            this.options.projects = resp.data
          })
      },
      // 查询合同列表
      loadContracts(proId) {
        if(proId){
          getAction(this.url.findByProjectId, { projectId: proId })
            .then(resp => {
              this.options.contracts = resp.data
            })
        }else {
          getAction(this.url.findByProjectId)
            .then(resp => {
              this.options.contracts = resp.data
            })
        }
      },
      proSelectChange(id) {
        this.$delete(this.searchForm,'contractId')
        this.loadContracts(id)
      },
      dateTimeFormat,
      beforeUpload,
      uploadStatusChange
    }
  }
</script>

<style lang="scss" scoped>
  .equipment-list {
    .left-collapse{
      margin-left: 1em;
      margin-top: 1em;
      margin-right: 1em;
    }
    .left-layout{
      margin-top: 1em;
      margin-right: 1em;
    }
    /deep/.el-divider--horizontal {
      marign: 8px 0!important;
    }
    /deep/.el-form-item__content{
      height:auto;
      line-height:32px;
      margin-left:90px!important
    }
    .left-container {
      background: #fff;
      position: relative;
      .sider-btn {
        cursor: pointer;top:18px;position: absolute;font-size: 28px;color:#73767b;
      }
      .el-icon-s-fold {
        right: 0px;
      }
      .el-icon-s-unfold {
        top: -6px;
        right: -57px;
        border: 1px dashed #d5d5d5;
        background: #fff;
      }
      .attr-row {
        .el-col {
          text-align: center;
          span {
            cursor: pointer;
          }
        }
      }
    }

  }
  /deep/.el-picker-panel {
    z-index: 2900!important
  }
</style>

